<template>
  <div class="container bg-gray">
    <div class="line10"></div>
    <div class="invoice-title bg-white" @click="showInvoiceDetail(info)">
      <div class="flex">
        <div class="flex-con status-field">
          <div class="statusinfo">
            {{info.status|status}}
          </div>
          <div v-if="info.billing_time" class="billing-time">{{info.billing_time|parseTime}}</div>
        </div>
        <!-- <template v-if="info.status==0||info.status==100">
          <div>
            查看
          </div>
          <img src="../../assets/icons/usercenter/gt@2x.png" alt="" class="gt" />
        </template> -->
      </div>
    </div>
    <div class="caption-title">
      接收信息
    </div>
    <div class="bg-white item-list">
      <div class="item-detail">
        <div class="flex">
          <div class="label">
            电子邮件
          </div>
          <div class="flex-con">
            {{info.email||'--'}}
          </div>
        </div>
      </div>

    </div>

    <div class="caption-title">
      发票信息
    </div>
    <div class="bg-white item-list">
      <div class="item-detail border-b">
        <div class="flex">
          <div class="label">
            发票抬头
          </div>
          <div class="flex-con">
            {{info.invoice}}
          </div>
        </div>
      </div>
      <div class="item-detail border-b">
        <div class="flex">
          <div class="label">
            税号
          </div>
          <div class="flex-con">
            {{info.taxid}}
          </div>
        </div>
      </div>
      <!-- <div class="item-detail border-b">
                <div class="flex">
                     <div class="label">
                        发票内容
                    </div>
                    <div class="flex-con">
                        {{info.content}}
                    </div>  
                </div>
            </div> -->
      <div class="item-detail border-b">
        <div class="flex">
          <div class="label">
            发票金额
          </div>
          <div class="flex-con">
            <span class="amount">{{info.amount}}</span>
            元
          </div>
        </div>
      </div>
      <div class="item-detail">
        <div class="flex">
          <div class="label">
            申请时间
          </div>
          <div class="flex-con">
            {{info.apply_time|parseTime}}
          </div>
        </div>
      </div>

    </div>
    <a class="btn-auth block" :href="info.pdf" v-if="info.pdf">
      下载发票
    </a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        info: {}
      };
    },
    methods: {
      showInvoiceDetail(item) {

      }
    },
    created() {
      let id = this.$route.query.id;
      if (id) {
        this.showLoading();
        this.$post("/api/get_invoice", {
            id
          })
          .then(data => {
            this.hideLoading();
            this.info = data;
          })
          .catch(_ => {
            this.hideLoading();
          });
      }
    },
    filters: {
      status(s) {
        return {
          "-1": "开票失败",
          "0": "已开票",
          "1": "补打发票",
          "2": "作废发票",
          "3": "冲红发票",
          "5": "未开发票",
          "99": "开票中",
          "100": "开票成功,已领取发票"
        }[s + ""];
      }
    }
  };

</script>

<style scoped>
  .amount {
    color: #ff0000;
  }

  .container {
    font-size: 0.4rem;
    color: #666;
  }

  .statusinfo {
    font-size: 0.42rem;
  }

  .gt {
    margin-left: 0.3rem;
  }

  .invoice-title {
    padding: 0.4rem 0.4rem;
  }

  .line10 {
    height: 0.3rem;
  }

  .caption-title {
    padding: 0.4rem 0 0.3rem 0.4rem;
  }

  .item-detail {
    padding: 0.4rem;
  }

  .label {
    color: #999;

    width: 2rem;
  }

  .billing-time {
    padding-top: 0.2667rem;
  }

  .btn-auth {
    display: block;
    width: 8rem;
    height: 1.2rem;
    font-size: 0.42rem;
    line-height: 1.2rem;
    text-decoration: none;
    background-color: #4ba45a;
    color: white;
    text-align: center;
    border-radius: 5px;
    margin: 1.5rem auto 0 auto;
  }

</style>
